<template>
  <div class="components-container">
    <template v-if="detailValue && detailValue.length > 0">
      <div v-for="(item, index) in detailValue" :key="index" class="float-l x-margin avatar">
        <el-image v-if="matchFileType(item) === 'image'" :src="item" :preview-src-list="[item]" class="avatar"/>
        <video v-else-if="matchFileType(item) === 'video'" :src="item" class="avatar" controls="controls">
          您的浏览器不支持视频播放
        </video>
        <div v-else class="float-l x-margin avatar">{{ fileList[index].name || fileList[index] }}</div>
        <div class="remove" @click.stop="handleRemove(index)">删除</div>
      </div>
    </template>
    <el-upload
      :disabled="readonly"
      :action="uploadPath"
      :limit="5"
      :show-file-list="false"
      :headers="headers"
      :on-exceed="uploadOverrun"
      :on-success="handleGalleryUrl"
      :on-progress="uploadProcess"
      :before-upload="beforeUpload"
      :accept="accept"
      class="float-l avatar-uploader"
      multiple
    >
      <i class="el-icon-plus avatar-uploader-icon avatar x-margin "/>
    </el-upload>

    <el-dialog :visible.sync="uploading" :close-on-press-escape="false" :close-on-click-modal="false" title="上传进度" width="300px">
      <div style="width: 100%; text-align: center;">
        <el-progress :percentage="uploadPercent" type="circle" style="margin-top:30px;"/>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="uploading=false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { uploadPath } from '@/api/sys/storage'
import { getToken } from '../../utils/auth'
import Common from '../../utils/common'

export default {
  name: 'MultiFileUploader',
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    },
    accept: {
      type: String,
      default: '*'
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      uploadPath,
      detailValue: [],
      fileList: [],
      dataIndex: -1,
      dataForm: { type: 1, value: '' },

      uploading: false,
      uploadPercent: 0
    }
  },
  computed: {
    headers() {
      return {
        'X-Radio-Token': getToken()
      }
    }
  },
  watch: {
    // 监听prop传的value，如果父级有变化了，将子组件的myValue也跟着变，达到父变子变的效果
    value(newVal) {
      const that = this
      that.initFromValue(newVal)
    },
    // 监听myValue，如果子组件中的内容变化了，通知父级组件，将新的值告诉父级组件，我更新了，父级组件接受到值后页就跟着变了
    detailValue(newVal) {
      const that = this
      that.emitToValue(newVal)
    }
  },
  created() {
    const that = this
    that.initFromValue(that.value)
  },
  methods: {

    emitToValue(newVal) {
      const that = this
      that.$emit('input', newVal)
    },
    initFromValue(newVal) {
      console.log('initFromValue:', newVal)
      const that = this
      that.detailValue = []
      try {
        if (newVal instanceof Array) {
          that.detailValue = Common._confirmValidArray(newVal)
        } else {
          that.detailValue = []
        }
      } catch (e) {
        console.error('initFromValue 参数错误:' + newVal)
      }
    },
    uploadPicUrl: function(response) {
      this.uploading = false
      this.goods.picUrl = response.data.url
    },
    uploadOverrun: function() {
      this.$message({
        type: 'error',
        message: '上传文件个数超出限制!最多上传5张图片!'
      })
    },
    handleGalleryUrl(response, file, fileList) {
      this.uploading = false
      if (response.errno === 0) {
        this.fileList = fileList
        this.detailValue.push(response.data.url)
        console.log(this.fileList)
      }
    },
    handleRemove: function(index) {
      this.detailValue.splice(index, 1)
    },
    uploadProcess(event, file, fileList) {
      this.uploadPercent = parseInt(file.percentage.toFixed(0))
    },
    beforeUpload() {
      this.uploading = true
    }
  }
}
</script>

<style lang="scss" scoped>
   .header {
     margin-top: 0;
     margin-bottom: 10px;
   }

   .avatar-uploader .el-upload {
     width: 145px;
     height: 145px;
     border: 1px dashed #d9d9d9;
     border-radius: 6px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
   }

   .avatar-uploader .el-upload:hover {
     border-color: #20a0ff;
   }

   .avatar-uploader-icon {
     font-size: 28px;
     color: #8c939d;
     width: 120px;
     height: 120px;
     line-height: 120px;
     text-align: center;
   }

   .avatar {
     position: relative;
     width: 145px;
     height: 145px;
     display: block;
     .remove {
       position: absolute;
       padding: 0 6px;
       color: white;
       background-color: rgba(1,1,1,0.4);
       top: 0;
       right: 0;
       border-radius: 5px;
     }
   }
</style>
